<template>
    <div>
        <h3>会员列表</h3>

        <div>
            姓名:<input type="text" v-model="state.name" />
            手机号:<input type="text" v-model="state.phone" />
            <input type="button" value="查询" @click="getList" />
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>密码</td>
                    <td>电话号</td>
                    <td>邮件</td>
                    <td>身份证号</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.pwd }}</td>
                    <td>{{ item.phone.substring(0, 3) + '****' + item.phone.substring(7)}}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.card }}</td>
                    <td>{{ item.sex==1 ? '男' : '女' }}</td>
                    <td>
                        <input type="button" value="修改" @click="Update(item.id)" />
                        <input type="button" value="删除" @click="Del(item.id)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

let data: any = reactive({
    state: {
        //前端向后端传递的数据
        name: '',
        phone: '',
    },
    list: [],
});
let { state, list } = toRefs(data);

onMounted(() => {
    getList();
});




//获取列表数据
const getList = () => {
    //拼接参数
    let obj = {
        name: state.value.name,
        phone: state.value.phone,
    };

    axios({
        url: '/api/Member/ShowMember',
        method: 'get',
        params: obj,
    })
        .then((res) => {
            console.log(res);
            list.value = res.data.data;
        })
        .catch((err) => {
            console.log(err);
        });
};

const Del = (id: any) => {
    let res = confirm("确认删除吗？");
    if (res) {
        let obj = {
            id: id,
        }
        axios({
            url: '/api/Member/DeleteMember',
            method: 'delete',
            params: obj
        })
            .then((res) => {
                if (res.data.data > 0) {
                    alert("删除成功");
                    getList();
                }
                else {
                    alert("删除失败");
                    return;
                }
            })
    }


}


const Update = (id: any) => {
    router.push({
        path: '/UpdateMember',
        query: {
            id: id
        }
    })
}
</script>

<style scoped></style>